<template>
    <van-popup v-model="showState" class="searchLayer" :style="{height:'100%',width:'100%'}" duration=".2">
        <div class="search">
            <form action="/">
                <van-search v-model="value" show-action placeholder="请输入要搜索的内容" background="#000" @search="onSearch"
                    @cancel="quit" @clear="cut" />
            </form>
        </div>
        <div v-show="switchs">
            <div class="hot-search">
                <h1>热门搜索</h1>
                <p><span v-for="ele in  hotSearch" :key="ele.id" @click="add">{{ele.kw}}</span></p>
            </div>
            <div class="history-search">
                <h1><span>搜索历史</span><span class="icon-shanchu iconfont" @click="clearHistory">清除</span></h1>
                <p><span v-for="(ele,index) in  historySearch" :key="index" @click="add">{{ele}}</span></p>
            </div>
        </div>
        <div v-show="!switchs">
            <van-dropdown-menu active-color="#fff">
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>
            <!-- ///// -->
            <van-list v-model="loading" :finished="finished" finished-text="- End -" @load="onLoad" :error.sync="error"
                error-text="请求失败，点击重新加载">

                <div class="imgs-lists" v-if="lists.length">
                    <template v-for="ele in lists">
                        <div class="push-img" v-for="item in ele" :key="item.postid"  @click="item.post_type==3?toSpecial(item.postid):ShowPopup([true,item.postid])">
                            <img v-lazy="item.image" alt="" />
                           
                            <div class="lists-title" v-if="value1!=='album'">
                                <p>
                                    <span>{{ item.cates[0].catename }}</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>{{ item.duration | min }}</span>
                                </p>
                                <div>{{ item.title }}</div>
                            </div>
                            <div class="lists-titles" v-if="value1=='album'">
                                <span>专题</span>
                                <p>{{item.title }}</p>
                                <div>{{item.app_fu_title }}</div>
                            </div>
                        </div>
                    </template>
                </div>
<van-empty image="search" v-if="!lists.length" />
            </van-list>
        </div>
    </van-popup>
</template>

<script>
    import {
        getPlotLists
    } from "../../api/search"
    import {
        getSearch
    } from "../../api/search"
    import {
        mapState,
        mapMutations
    } from "vuex";
    export default {
        name: 'search',
        data() {
            return {
                value: '',
                hotSearch: [],
                historySearch: [],
                lists: [],
                switchs: true,
                showState: false,
                off: 1,
                value1: 'post',
                value2: 'default',
                option1: [{
                        text: '影片',
                        value: 'post'
                    },
                    {
                        text: '专题',
                        value: 'album'
                    },
                ],
                option2: [{
                        text: '默认排序',
                        value: 'default'
                    },
                    {
                        text: '最新',
                        value: 'addtime_desc'
                    }
                ],
                loading: false,
                finished: false,
                error: false,
            }
        },
        computed: {
            ...mapState(['showSearch'])
        },
        watch: {
            showSearch(val) {
                this.showState = val
            },
            value1(val){
                console.log("新",val);
                 this.lists=[];
                this.off=1;
                 this.obtain();
            },
              value2(val){
                console.log("新",val);
                 this.lists=[];
                this.off=1;
                 this.obtain();
            }
        },
        methods: {
            ...mapMutations(['showSearchPopup','ShowPopup']),
            onSearch(val) {
                this.lists=[];
                this.off=1;
                console.log("开始搜索", val);
                this.obtain();
                this.switchs = false
                //如果不存在当前输入的关键词 则存入
                if (this.historySearch.indexOf(this.value) === -1) {
                    this.historySearch.unshift(this.value);
                    //历史记录最多只取十个
                    this.historySearch = this.historySearch.slice(0, 10);
                    sessionStorage.setItem(
                        "keyword",
                        JSON.stringify(this.historySearch)
                    );
                }
            },
            obtain() {
                getSearch({
                    kw: this.value,
                    type: this.value1,
                    order: this.value2,
                    p: this.off
                }).then(data => {
                    this.lists.push(data.data.result.list);
                    console.log(this.lists);
                    this.off+=2;
                    this.loading = false;
                    if (data.data.length < 10) {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.error = true;
                });
            },
            quit() {
                this.switchs = true;
                this.lists=[];
                this.off=1;
                this.showSearchPopup(false)
            },

            cut() {
                this.switchs = !this.switchs
            },
            // onCancel() {
            //     this.showSearch = false
            //     console.log("退出搜索");
            // },
            clearHistory() {
                //清空历史记录
                sessionStorage.clear();
                this.historySearch = [];
            },
            onLoad() {
                console.log("触发");
                this.obtain()
            },
                
            toSpecial(id){
        console.log("专题文章",id);
        this.$router.push({name:'Special',params:{id:id}})
      },
      add(e){
      this.value= e.target.textContent;
      this.onSearch()
      }
        },
        created() {
            getPlotLists().then(data => {
                this.hotSearch = data.data.recommend_keywords
            });
            //先读取存储的历史记录
            this.historySearch = JSON.parse(sessionStorage.getItem("keyword")) || [];
        }
    }
</script>

<style lang="less" scoped>
    .searchLayer {
        background-color: #000;

        .search {
            margin-bottom: 26px;

            .van-search {
                caret-color: #31A2F7;

                & /deep/ .van-search__content {
                    background-color: #252525
                }

                /deep/ input {
                    color: #fff;
                }

                /deep/ .van-field__left-icon {
                    color: #ccc;
                }
            }
        }

        .hot-search,
        .history-search {
            line-height: 38px;
            color: #ccc;
            padding: 0 16px;
            font-size: 14px;

            p {
                span {
                    display: inline-block;
                    padding: 0 6px;
                    line-height: 26px;
                    background-color: #252525;
                    margin-right: 10px;
                }
            }
        }

        .history-search {
            margin-top: 20px;

            h1 {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
            }
        }

        .van-dropdown-menu {
            /deep/ div {
                font-size: 12px;
                background-color: #000;
            }
        }
    }

    .push-img {
        position: relative;
        height: 236px;

        & img {
            width: 100%;
            height: 100%;
        }

        .lists-title {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 0 0 16px 10px;
            color: #fff;
            text-align: left;

            p {
                font-size: 14px;
                margin-bottom: 10px;
            }

            div {
                font-size: 16px;
            }
        }

        .lists-titles {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 0 0 16px 10px;
            color: #fff;
            text-align: left;

            span {
                display: inline-block;
                width: 38px;
                font-size: 12px;
                padding: 8px 0;
                border-bottom: 1px solid #fff;
            }

            p {
                font-size: 14px;
                margin: 10px 0 12px 0;
            }

            div {
                font-size: 12px;
            }
        }
    }
</style>